<template>
  <a-card>
    <a-row>
      <a-col :span='14'>
        <h4>页面列表:</h4>
        <div class='page-list page-scroll'>
          <a-row class='page-item' v-for='(item,idx) in pages' :key="idx+''">
            <a-col :span='10'>
              <a-input placeholder='页面名标题' v-model='item.name'></a-input>
            </a-col>
            <a-col :span='8' :offset='1'>
              <a-button @click.stop='handleSelectFile(idx)'>{{item.fileName?item.fileName:'请选择文件'}}</a-button>
            </a-col>
            <a-col :span='4' :offset='1'>
              <a-tag
                v-if='item.id'
                class='cur-p'
                :color="item.status === 10 ? 'green' : 'red'"
                @click='item.status= item.status ===10?20:10'
              >{{ item.status === 10 ? '正常' : '停用' }}</a-tag>
              <a-button v-else type='danger' size='small' @click.stop='delPage(idx)'>删除</a-button>
              </a-col>
          </a-row>
          <a-button @click='handleSelectFile(-1)' class='btn-add'>+</a-button>
          <!-- 文件选择器 -->
          <FilesModal
            ref='FilesModal'
            :multiple='multiple'
            @handleSubmit='handleSelectFileSubmit'
          />
        </div>
      </a-col>
    </a-row>
  </a-card>
</template>

<script>
import FilesModal from '@/views/book/modules/FilesModal'
import FileExtEnum from '@/common/enum/file/FileExt'
import cloneDeep from 'lodash.clonedeep'
const pageInfoDef = {
  name: '',
  filePath:'',
  fileName:'',
}
export default {
  name: 'video',
  components:{FilesModal},
  data(){
    return {
      // 标签布局属性
      labelCol: { span: 7 },
      // 输入框布局属性
      wrapperCol: {
        span: 13
      },
      form: this.$form.createForm(this),
      fileType:FileExtEnum.VIDEO.value,
      formData:{},
      pages:[],
      multiple:false,
      currentPageId:null,
      data:{
        audioPath:'',
        fileName:'',
      },
    }
  },
  methods:{
    setFormData(data) {
      if(data.form) this.formData = data.form
      this.pages = data.pages
    },
    getFormData() {
      return new Promise((resolve) => {
        if (!this.pages.length) {
          this.$message.error('请添加页面')
          return
        }
        resolve({
          form: this.formData,
          pages: this.pages
        })
      })
    },
    delPage(idx){
      this.pages.splice(idx, 1)
    },
    // 打开文件选择器
    handleSelectFile(idx){
      this.multiple=idx === -1
      this.currentPageId = idx
      this.$refs.FilesModal.show(this.fileType,this.formData.dirName)
    },
    handleSelectFileSubmit({items,name}){
      this.formData.dirName=name
      if(this.currentPageId > -1){
        this.pages[this.currentPageId].fileName = items[0].label
        this.pages[this.currentPageId].filePath = items[0].value
      }else{
        items.forEach(row => {
          const item = cloneDeep(pageInfoDef)
          item.filePath = row.value
          item.fileName = row.label
          item.name = row.label.split('.')[0]
          this.pages.push(item)
        })
      }
    },
  }
}
</script>

<style lang='less' scoped>

.btn-add {
  width: 100%;
  margin-top: 10px;
  font-size: 24px;
  height: 40px;
}


.page-list {
  max-height: 500px;
  overflow: scroll;
  padding: 10px 10px 10px 0;

  .page-item {
    padding-top: 10px;
    cursor: pointer;
    border-bottom: 1px dashed #ccc;
    margin-bottom: 10px;
    padding-bottom: 10px;
    position: relative;

    &.flex {
      display: flex;
    }

    &.active {
      border-left: 3px solid blue;
    }

    &:hover {
      .icon-close {
        display: block;
      }
    }
    .cur-p{
      padding: 5px 15px;
    }
  }
}
</style>